// 入口函数
$(function () {
    // 需求1:获取裁剪区域的DOM元素
    var $image = $('#image')
    // 1.2 配置选项
    var options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview',
    }
    // 创建裁剪区域
    $image.cropper(options);

    // 需求2:点击上传按钮,触发input的点击事件,选择图片
    $('#chooseImageBtn').on('click', function () {
        $('#chooseImageInp').click()
        // // trigger()会触发浏览器默认行为
        // $('#chooseImageInp').trigger('clcik')
        // // triggerHandler不会触发浏览器默认行为
        // $('#chooseImageInp').trigger('clcik')

    });
    // 选择图片后,修改页面中的图片   change事件
    $('#chooseImageInp').on('change', function (e) {
        // 获取文件对象this.files[0]
        console.log('图片改变');
        let file = e.target.files[0]
        // 非空校验
        if (file === undefined) {
            return layui.layer.msg('请选择图片,用于更换头像!')
        }
        // 根据文件对象,生成一个虚拟路径
        let newImgURL = URL.createObjectURL(file);
        console.log(newImgURL);
        // 利用cropper,销毁原有图片,设置新图片,并进行参数配置
        // 销毁原有图片
        $image.cropper('destroy')
            // 设置新图片路径
            .attr('src', newImgURL)
            .cropper(options)
    })

    // 需求4:上传头像
    $('#uploadBtn').on('click', function () {
        console.log(123);
        // 把裁剪区域的图片转换为base64格式的字符串
        var dataURL = $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
        // 发送ajax请求,更换用户头像
        axios({
            method: 'POST',
            url: '/my/update/avatar',
            // 我们要用自己拼接这种:a=1&b=2&c=3
            // 注意:encodeURIComponent(dataURL)  编译dataURL
            data: "avatar=" + encodeURIComponent(dataURL)

        }).then(res => {
            // 判断
            if (res.data.status !== 0) {
                // 失败提示信息
                return layui.layer.msg(res.data.message);
            }
            // 成功:提示+刷新父页面图像渲染
            layui.layer.msg('恭喜您,更改用户头像成功!')
            window.parent.getUserInfo()
        })

    })

})